<template>
  <Card dis-hover :bordered="false">
    <Row :gutter="8" class="ivu-mb-8">
      <!-- :options="options" -->
      <Col
        ><DatePicker
          v-model="params.month_time"
          type="month"
          v-width="200"
          :clearable="false"
          @on-change="askData"
        ></DatePicker
      ></Col>
      <Col>
        <Select
          v-model="params.project_id"
          v-width="200"
          placeholder="请选择项目"
          clearable
          @on-change="askData"
        >
          <Option
            v-for="item in projectList"
            :value="item.project_id"
            :key="item.project_id"
            >{{ item.name }}</Option
          >
        </Select>
      </Col>
      <Col
        ><Button
          type="primary"
          @click="handleEdit(false)"
          v-hasC="{
            name: '-v1-net-plan-add-plan',
            flag: '/v1/net/plan/add-plan',
          }"
          >新增计划</Button
        ></Col
      >
    </Row>
    <Table :columns="columns" :data="data" :loading="loading">
      <template slot-scope="{ row }" slot="action">
        <a
          @click="handleEdit(row, true)"
          v-hasC="{
            name: 'v1-net-plan-plan-info',
            flag: 'v1/net/plan/plan-info',
          }"
          >查看</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-net-plan-plan-info',
            flag: 'v1/net/plan/plan-info',
          }"
        />
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: '-v1-net-plan-add-plan',
            flag: '/v1/net/plan/add-plan',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: '-v1-net-plan-add-plan',
            flag: '/v1/net/plan/add-plan',
          }"
        />
        <a
          @click="handleDelete(row)"
          style="color: #ed4014"
          v-hasC="{
            name: '-v1-net-plan-del-plan',
            flag: '/v1/net/plan/del-plan',
          }"
          >删除</a
        >
      </template>
      <template slot="footer">
        <Page
          show-total
          show-elevator
          show-sizer
          transfer
          :total="total"
          :current.sync="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOpts"
          @on-change="changepage"
          @on-page-size-change="changepageSize"
          style="text-align: center"
        />
      </template>
    </Table>
    <Delete ref="Delete" @askData="askData" />
    <Edit ref="Edit" @askData="askData" :projectList="projectList" />
  </Card>
</template>
<script>
import Delete from "./Delete";
import Edit from "./Edit";
import { netplanlist, netreportschedulecondition } from "@/api/hqapi";
export default {
  name: "planList",
  components: { Delete, Edit },
  data() {
    return {
      pageOpts: [10, 20, 50, 100],
      total: 0,
      params: { page: 1, pageSize: 20, project_id: "", month_time: new Date() },
      model: "",
      projectList: [],
      columns: [
        { title: "项目", key: "project_sx", minWidth: 160 },
        { title: "权限组", key: "net_config_name", minWidth: 160 },
        { title: "操作人", key: "realname", minWidth: 160 },
        { title: "更新时间", key: "updated_at", minWidth: 170 },
        { title: "操作", slot: "action", width: 160 },
      ],
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      data: [],
      loading: false,
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      this.askDataCondition()
      // this.projectList = JSON.parse(localStorage.getItem("project"));
      // this.askData();
    },
    askData() {
      this.loading = true;
      netplanlist(this.params).then((res) => {
        this.total = res.total;
        this.data = res.list;
        this.loading = false;
      });
    },
    changeData(data){
      data.forEach(item => {
        item.name=item.label
        item.project_id=item.value
      });
      return data;
    },
    askDataCondition () {
        netreportschedulecondition().then(res => {
            this.projectList =this.changeData(res.project) 
            this.askData()
        })
    },
    changepage(e) {
      this.params.page = e;
      // console.log(this.params)
      this.askData();
    },
    changepageSize(e) {
      this.params.page = 1;
      this.params.pageSize = e;
      this.askData();
    },
    handleEdit(row, bool) {
      let projectId = this.params.project_id || this.projectList[0].project_id;
      this.$refs.Edit.initial(row, projectId, this.params.month_time, bool);
    },
    handleDelete(row) {
      this.$refs.Delete.initial(row);
    },
  },
};
</script>
